import { Button, Dialog, Modal, Toast } from 'antd-mobile'
import React, { useCallback } from 'react'
import style from './index.less'
import { history } from 'umi';
import { PhoneFill } from 'antd-mobile-icons'
import { useEffect } from 'react'
import { getCancel, getRemove } from '@/services/Publish';
export type SupplyOrderDto = {
    id: number,
    supplierId?: number,
    supplierName: string,
    supplierPhone: string,
    negotiationStateList: string[],
    billState: string,
}
type Props = {
    data: SupplyOrderDto;
    callback: () => void;
};

export default (props: Props) => {
    const [visible, setVisible] = React.useState<boolean>(false);
    const { data, callback } = props;

    const onCancel = useCallback(async () => {
        Dialog.confirm({
            title: '提示',
            content: '是否放弃交易',
            onConfirm: async () => {
                await getCancel(data.id)
                Toast.show({
                    icon: 'success',
                    content: '已放弃交易',
                })
                callback();
            },
        })
    }, []);
    const onDelete = useCallback(async () => {
        Dialog.confirm({
            title: '提示',
            content: '是否删除订单',
            onConfirm: async () => {
                await getRemove(data.id)
                Toast.show({
                    icon: 'success',
                    content: '已删除订单',
                })
                callback();
            },
        })
    }, []);

    return (
        <div>
            <div className={style.btns}>
                {data.negotiationStateList.includes('FAILED') ? (
                    <Button
                        className={style.btn}
                        fill='outline'
                        size="small"
                        onClick={onDelete}
                    >
                        删除订单
                    </Button>
                ) : null}
                <Button
                    className={style.btn}
                    size="small"
                    fill='outline'
                    onClick={async () => {
                        setVisible(true);
                    }
                    }
                >
                    联系商家
                </Button>
                {data.negotiationStateList.includes('SUCCESS') && data.billState === "NO_INVOICE" ? (
                    <Button
                        className={style.btn}
                        size="small"
                        fill='outline'
                        color='success'
                    >
                        申请开票
                    </Button>
                ) : null}
                {data.negotiationStateList.includes('SUCCESS') && data.billState === "PARTIAL_INVOICE" ? (
                    <Button
                        className={style.btn}
                        size="small"
                        fill='outline'
                        color='success'
                    >
                        部分开票
                    </Button>
                ) : null}
                {data.negotiationStateList.includes('SUCCESS') && data.billState === "SUCCESS" ? (
                    <Button
                        className={style.btn}
                        size="small"
                        fill='outline'
                        color='success'
                    >
                        已开票
                    </Button>
                ) : null}
                {data.negotiationStateList.includes('SUCCESS') && data.billState === "WAIT" ? (
                    <Button
                        className={style.btn}
                        size="small"
                        fill='outline'
                        disabled
                    >
                        开票中
                    </Button>
                ) : null}
                {data.negotiationStateList.includes('PURCHASER') ? (
                    <Button
                        className={style.btn}
                        size="small"
                        fill='outline'
                        onClick={onCancel}
                    >
                        放弃交易
                    </Button>
                ) : null}
                {data.negotiationStateList.includes('PURCHASER') ? (
                    <Button
                        className={style.btn}
                        color='success'
                        fill='outline'
                        size="small"
                        onClick={async () => {
                            history.push(`/supply/order/transaction?id=${data.id}`)
                        }}
                    >
                        确认交易
                    </Button>
                ) : null}
            </div>
            <Modal
                showCloseButton={true}
                visible={visible}
                onClose={() => {
                    setVisible(false);
                }}
                title="联系方式"
                className={style.modal2}
                content={(
                    <div className={style['info-warp']}>
                        <div className={style.line2}>
                            <div className={style.info}>
                                <div className={style.tip}>以下是商家的联系方式，请电话联系</div>
                                <div className={style.phone}>
                                    <span>
                                        {data.supplierName ? `${data.supplierName} ` : ''}
                                        {data.supplierPhone}
                                    </span>
                                </div>
                            </div>
                            <div
                                className={style.icon}
                                onClick={() => {
                                    window.location.href = `tel:${data.supplierPhone}`;
                                }}
                            >
                                <div>
                                    <PhoneFill style={{ marginLeft: '5px' }} />
                                </div>
                                呼叫
                            </div>
                        </div>
                    </div>
                )}
            />
        </div>
    )
}
